<template>
  <view class="modify-phone-number">
    <view v-if="currentStep === 1" class="step-1">
      <image
        class="image"
        src="/static/profile/modify-phone-number-start.png"
      />
      <view class="phone-number">+86 {{ replaceStr(userInfo.phone) }}</view>
      <button class="btn-primary" @click="handleValid">修改手机号</button>
    </view>
    <view v-else-if="currentStep === 2" class="step-2">
      <view class="input-row">
        <view class="hint">+86</view>
        <input
          v-model="phoneNumber"
          type="number"
          maxlength="11"
          placeholder="请输入您的手机号"
          placeholder-class="placeholder_16"
        />
      </view>
      <view class="input-row">
        <input
          v-model="captcha"
          type="number"
          maxlength="6"
          placeholder="请输入验证码"
          placeholder-class="placeholder_16"
        />
        <view class="captcha" @click="getSMSCaptcha">{{ captchaText }}</view>
      </view>
      <button class="btn-primary" @click="handleConfirm">确认</button>
    </view>
    <view v-else class="step-3">
      <image class="image" src="/static/profile/modify-phone-number.png" />
      <view class="phone-number">+86 {{ phoneNumber }}</view>
      <button class="btn-primary" @click="handleFinish">完成</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store/user'
import { useSMSCaptcha } from '@/hooks/useSMSCaptcha'
import { editPhoneNumber } from '@/api'
import { regExp } from '@/utils/regExp'
import { replaceStr } from '@/utils'

const currentStep = ref(1)
const { userInfo } = storeToRefs(useUserStore())
const { captcha, captchaText, phoneNumber, getSMSCaptcha } = useSMSCaptcha()

function handleValid() {
  uni.setNavigationBarTitle({
    title: '更改手机号'
  })
  currentStep.value++
}

function handleConfirm() {
  const showMsg = title => uni.showToast({ title, icon: 'none' })

  if (!regExp.phoneNumber.test(phoneNumber.value))
    return showMsg('填写的手机号码不正确')
  if (!captcha.value) return showMsg('还没有输入验证码')

  editPhoneNumber(phoneNumber.value, captcha.value).then(() => {
    uni.setNavigationBarTitle({
      title: '绑定成功'
    })
    currentStep.value++
  })
}

function handleFinish() {
  useUserStore().getUserInfo()
  uni.navigateBack()
}
</script>

<style scoped lang="scss">
.step-1,
.step-3 {
  padding: 168rpx 0;
  .phone-number {
    color: #333;
    font-size: 36rpx;
    font-weight: bold;
    padding-top: 60rpx;
    text-align: center;
    padding-bottom: 30rpx;
  }
}
.step-1 .image {
  width: 178rpx;
  height: 250rpx;
  display: block;
  margin: auto;
}
.step-3 .image {
  width: 194rpx;
  height: 250rpx;
  display: block;
  margin: auto;
}
.step-2 {
  padding: 320rpx 0;
  .btn-primary {
    margin: 100rpx 30rpx;
  }
}
.input-row {
  height: 114rpx;
  margin: 0 70rpx;
  border-bottom: 2rpx solid #efefef;
  display: flex;
  align-items: center;
  justify-content: space-between;
  input {
    flex: 1;
  }
  .hint {
    color: #222;
    font-size: 30rpx;
    font-weight: bold;
    margin-right: 30rpx;
  }
  .captcha {
    color: #4771f6;
    font-size: 28rpx;
    line-height: 26rpx;
    padding-left: 30rpx;
    border-left: 2rpx solid #4771f6;
  }
}
.btn-primary {
  margin: 0 30rpx;
}
</style>
